<script setup lang="ts">
import type { IMetaWarehouse } from '@/api/interface/rescue/meta/metaWarehouse'

defineProps<{
  warehouse: IMetaWarehouse.Row | null
}>()

const emit = defineEmits<{
  close: []
}>()

// 关闭弹窗
function handleClose() {
  emit('close')
}
</script>

<template>
  <view class="warehouse-detail">
    <!-- 头部 -->
    <view class="detail-header">
      <view class="header-left">
        <wd-icon name="warehouse" size="18px" color="#007AFF" />
        <text class="detail-title">仓库详情</text>
      </view>
      <view class="header-right">
        <wd-button type="text" class="close-btn" @click="handleClose">
          <wd-icon name="close" size="18px" color="#8E8E93" />
        </wd-button>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="detail-content">
      <!-- 基本信息 -->
      <view class="info-section">
        <view class="section-title">
          <wd-icon name="info" size="14px" color="#007AFF" />
          <text>基本信息</text>
        </view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">仓库名称</text>
            <text class="info-value">
              {{ warehouse?.name || '暂无' }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">仓库地址</text>
            <text class="info-value">
              {{ warehouse?.address || '暂无' }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">详细地址</text>
            <text class="info-value">
              {{ warehouse?.detailAddress || '暂无' }}
            </text>
          </view>
        </view>
      </view>

      <!-- 状态信息 -->
      <view class="info-section">
        <view class="section-title">
          <wd-icon name="setting" size="14px" color="#FF9500" />
          <text>状态信息</text>
        </view>
        <view class="status-row">
          <view class="status-item">
            <text class="status-label">仓库状态</text>
            <view class="status-tag" :class="{ 'status-tag--enabled': warehouse?.enable }">
              <wd-icon
                :name="warehouse?.enable ? 'check-circle' : 'close-circle'"
                size="12px"
                :color="warehouse?.enable ? '#34C759' : '#FF3B30'"
              />
              <text class="status-text">
                {{ warehouse?.enable ? '启用' : '禁用' }}
              </text>
            </view>
          </view>
          <view class="status-item">
            <text class="status-label">仓库类型</text>
            <view class="status-tag" :class="{ 'status-tag--public': warehouse?.common }">
              <wd-icon
                :name="warehouse?.common ? 'share' : 'lock'"
                size="12px"
                :color="warehouse?.common ? '#007AFF' : '#FF9500'"
              />
              <text class="status-text">
                {{ warehouse?.common ? '公共仓库' : '私有仓库' }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 时间信息 -->
      <view class="info-section">
        <view class="section-title">
          <wd-icon name="clock" size="14px" color="#AF52DE" />
          <text>时间信息</text>
        </view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">创建时间</text>
            <text class="info-value">
              {{ warehouse?.createTime || '暂无' }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">更新时间</text>
            <text class="info-value">
              {{ warehouse?.updateTime || '暂无' }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="detail-footer">
      <wd-button type="primary" class="close-button" @click="handleClose">
        <wd-icon name="check" size="14px" />
        <text>关闭</text>
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
/* Apple 设计系统变量 */
:root {
  --apple-blue: #007aff;
  --apple-green: #34c759;
  --apple-orange: #ff9500;
  --apple-purple: #af52de;
  --apple-red: #ff3b30;
  --apple-gray: #8e8e93;
  --apple-gray-light: #c7c7cc;
  --apple-gray-dark: #48484a;
  --apple-background: #f2f2f7;
  --apple-surface: #ffffff;
  --apple-radius: 12px;
  --apple-radius-small: 8px;
  --apple-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --apple-shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.warehouse-detail {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--apple-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-header {
  background: var(--apple-surface);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid var(--apple-gray-light);
  box-shadow: var(--apple-shadow);
  flex-shrink: 0;

  .header-left {
    display: flex;
    align-items: center;
    gap: 8px;

    .detail-title {
      font-size: 16px;
      font-weight: 600;
      color: #1d1d1f;
      line-height: 1.4;
    }
  }

  .header-right {
    .close-btn {
      padding: 6px;
      border-radius: 6px;
      transition: all 0.2s ease;

      &:active {
        background: rgba(142, 142, 147, 0.1);
        transform: scale(0.95);
      }
    }
  }
}

.detail-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-section {
  background: var(--apple-surface);
  border-radius: var(--apple-radius);
  border: 0.5px solid var(--apple-gray-light);
  overflow: hidden;
  box-shadow: var(--apple-shadow);

  .section-title {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.03) 100%);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 0.5px solid var(--apple-gray-light);

    text {
      font-size: 13px;
      font-weight: 600;
      color: #1d1d1f;
    }
  }

  .info-grid {
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;

    .info-label {
      font-size: 12px;
      color: var(--apple-gray-dark);
      font-weight: 500;
      min-width: 60px;
    }

    .info-value {
      font-size: 12px;
      color: #1d1d1f;
      flex: 1;
      text-align: right;
      line-height: 1.3;
    }
  }

  .status-row {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;

    .status-label {
      font-size: 12px;
      color: var(--apple-gray-dark);
      font-weight: 500;
      min-width: 60px;
    }

    .status-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      border: 1px solid;

      .status-text {
        font-size: 11px;
        font-weight: 500;
      }

      &--enabled {
        background: rgba(52, 199, 89, 0.1);
        border-color: rgba(52, 199, 89, 0.2);
        .status-text {
          color: var(--apple-green);
        }
      }

      &:not(.status-tag--enabled) {
        background: rgba(255, 59, 48, 0.1);
        border-color: rgba(255, 59, 48, 0.2);
        .status-text {
          color: var(--apple-red);
        }
      }

      &--public {
        background: rgba(0, 122, 255, 0.1);
        border-color: rgba(0, 122, 255, 0.2);
        .status-text {
          color: var(--apple-blue);
        }
      }

      &:not(.status-tag--public) {
        background: rgba(255, 149, 0, 0.1);
        border-color: rgba(255, 149, 0, 0.2);
        .status-text {
          color: var(--apple-orange);
        }
      }
    }
  }
}

.detail-footer {
  background: var(--apple-surface);
  padding: 12px 16px;
  border-top: 0.5px solid var(--apple-gray-light);
  display: flex;
  justify-content: center;
  flex-shrink: 0;

  .close-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--apple-blue) 0%, #5ac8fa 100%);
    border: none;
    border-radius: var(--apple-radius);
    color: white;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);

    &:active {
      transform: scale(0.95);
      box-shadow: 0 1px 4px rgba(0, 122, 255, 0.4);
    }
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .warehouse-detail {
    background: #1c1c1e;
  }

  .detail-header {
    background: #2c2c2e;
    border-bottom-color: #3a3a3c;

    .header-left {
      .detail-title {
        color: #ffffff;
      }
    }
  }

  .info-section {
    background: #2c2c2e;
    border-color: #3a3a3c;

    .section-title {
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(52, 199, 89, 0.1) 100%);
      border-bottom-color: #3a3a3c;

      text {
        color: #ffffff;
      }
    }

    .info-item {
      .info-label {
        color: rgba(255, 255, 255, 0.6);
      }

      .info-value {
        color: #ffffff;
      }
    }

    .status-item {
      .status-label {
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }

  .detail-footer {
    background: #2c2c2e;
    border-top-color: #3a3a3c;
  }
}

/* 响应式设计 */
@media screen and (max-width: 750px) {
  .detail-header {
    padding: 10px 12px;

    .header-left {
      .detail-title {
        font-size: 14px;
      }
    }
  }

  .detail-content {
    padding: 8px;
    gap: 8px;
  }

  .info-section {
    .section-title {
      padding: 6px 10px;

      text {
        font-size: 12px;
      }
    }

    .info-grid {
      padding: 6px 10px;
    }

    .info-item {
      .info-label {
        font-size: 11px;
        min-width: 50px;
      }

      .info-value {
        font-size: 11px;
      }
    }

    .status-row {
      padding: 6px 10px;
    }

    .status-item {
      .status-label {
        font-size: 11px;
        min-width: 50px;
      }
    }
  }

  .detail-footer {
    padding: 10px 12px;

    .close-button {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}

/* 移除动画效果，因为组件现在在弹窗内部 */
</style>
